<script setup>
import anime from 'animejs'

defineProps({
  msg: {
    type: String,
    default: ''
  },
  content: {
    type: String,
    default: ''
  },
  img: {
    type: String,
    default: ''
  },
  h: {
    type: String,
    default: ''
  }
})


onMounted(() => {
  const el = document.querySelectorAll('.cesh')
  anime({
    targets: el.children, // 给谁设置动画  也可以是'.th-list-show .th-content ul li'
    opacity: [0, 1],
    duration: 400,
    easing: 'spring(1, 80, 10, 0)',
    delay: anime.stagger(400, { start: 300 }), // 延迟300ms后 每个元素依次400ms出现动画，
    translateY: [anime.stagger([40, 10]), 0], // 从下到上，h1是从40px往上出现  h3是25px button 是10px出现
  })
})
</script>

<template>
  <!-- <div class="tit_box">
      <span class="my_span">web Developer</span>
    </div> -->


  <div class="h-400px top_box relative xwxs:(h-200px) xwmd:(h-400px)">
    <img class="w-full h-full" :src="img" alt="">
    <div class="absolute left-0 right-0 top-0 bottom-0 flex justify-center items-center flex-col ">
      <div class="mb-[32px] text-white animate__animated animate__fadeInDown tit_box ">
        <span class="my_span text-white xwxs:(text-[30px]) xwmd:(text-[60px])"> {{ msg }}</span>
      </div>
      <div v-if="content"
        class=" text-white animate__animated  animate__fadeInUp tit_box xwxs:(text-[12px]) xwmd:(text-[24px])">

        <span class="my_span text-white xwxs:(text-[12px]) xwmd:(text-[24px])"> {{ content }}</span>
      </div>

    </div>
  </div>
</template>

<style  scoped>
.tit_box {
  filter: contrast(30);
  text-align: center;
}

.my_span {
  color: #fff;
  animation: showup 2s forwards;
}

@keyframes showup {
  from {
    letter-spacing: -27px;
    filter: blur(10px);
  }

  to {
    letter-spacing: 10px;
    /* filter: blur(2px); */
  }
}
</style>
